<template>
  <div class="enter-advertising">
    <van-nav-bar title="我的分享" v-if="$route.query.isSelf" left-arrow @click-left="back()" />
    <div class="card" v-for="(item, index) in advList" :key="index">
      <div class="header">
        <div class="header-img">
          <van-image
            fit="cover"
            class="img"
            width="40px"
            height="40px"
            :src="item.userpic"
          />
        </div>
        <div class="header-content">
          <div class="title">
            {{ item.username }}
          </div>
          <div class="sub-title">
            {{ item.create_time || "" }}
          </div>
        </div>
        <div @click="handlerToChat(item)">
          <van-icon name="chat" color="#ccc" size="24px"/>
        </div>
      </div>
      <div class="content">
        <span @click="jump('advertisingInfo', { id: item.id, isSelf: $route.query.isSelf })" class="text" selectable="false" space="false" decode="false">
          <!-- 我们改装生产各种厢式货车出口墨西哥时插接板，阿拉伯，老挝口，秘鲁，埃塞俄比亚彩钢板。泰国右舵电动高速轿车，尼泊尔右舵大巴车，右舵货车，冷藏车，救护车，抑尘车，非州电动货车，轻卡，货车，油三轮，韩国电动三轮，休闲车，孟加拉电动四轮，中亚国家韩国电动三轮，休闲车，孟加拉电动四轮，中亚国家韩国电动三轮，休闲车，孟加拉电动四轮，中亚国家韩国电动三轮，休闲车，孟加拉电动四轮，中亚国家 -->
          {{ item.text }}
        </span>
        <van-row @click="jump('advertisingInfo', { id: item.id, isSelf: $route.query.isSelf })" class="img-list" gutter="4">
          <van-col span="8" v-for="url in item.image" :key="url">
            <div class="img-item">
              <van-image
                fit="cover"
                width="100%"
                height="100%"
                class="img"
                :src="url"
              />
            </div>
          </van-col>
        </van-row>
        <div class="content-tooltip">
          <div class="browse">浏览{{ item.cnt }}次</div>
          <div class="like" @click="switchLike(item)">
            <van-icon name="like" :color="item.is_point ? '#ee8a39' : ''" />
          </div>
          <div class="comment" @click="onRevert(item)">
            <van-icon name="comment" />
          </div>
        </div>
        <!-- <div class="content-like">
            <van-icon class="like" name="like" />
            <div class="img-like">
              <van-image fit="cover" width="100%" height="100%" class="img" src="https://img.yzcdn.cn/vant/cat.jpeg" />
            </div>
            <div class="img-like">
              <van-image fit="cover" width="100%" height="100%" class="img" src="https://img.yzcdn.cn/vant/cat.jpeg" />
            </div>

          </div> -->
        <input
          @click="onRevert(item)"
          placeholder-class="phcolor"
          readonly
          placeholder="回复"
          class="content-input"
          type="text"
        />
        <div class="reply-list">
          <div
            class="reply-item"
            v-fb="{cls: 'btn-active'}"
            @click="onRevert(item, chat)"
            v-for="(chat, chatIndex) in item.chat"
            :key="chatIndex"
          >
            <span style="color: #4f68b4;font-weight: bold;">
              {{ chat.name1 }}{{ chat.name2 ? "" : "：" }}
            </span>
            {{ chat.name2 ? "回复" : "" }}
            <span v-if="chat.name2" style="color: #4f68b4;font-weight: bold;">
              {{ chat.name2 }}：
            </span>
            {{ chat.text }}
          </div>
        </div>
      </div>
    </div>
    <!-- <van-empty image="search" description="暂无分享内容，快去分享吧！" /> -->
    <div class="ad-add" @click="jump('advertisingCreate')">
      <van-icon name="plus" />
    </div>

    <div z-index="100" v-show="showEvaluate"  @click="showEvaluate = false">
      <div class="wrapper">
        <input ref="inputVal" bindfocus="inputFocus" @blur="onBlur" v-model="evaluateValue" @keyup.enter="onBindconfirm" type="text" :placeholder="placeholderEvaluate"></input>
        <button @click="onBindconfirm">发送</button>
      </div>
    </div>

  </div>
</template>
<script>
import { adv_list, adv_point, add_adv_chat, my_adv } from "../../../api/ajax";

export default {
  data() {
    return {
      showEvaluate: false,
      focus: true,
      advList: [],
      currentAdv: {},
      evaluateValue: '',
      inputBottom: 0,
      placeholderEvaluate: '请输入评论内容',
      scrollTop: 0
    };
  },
  mounted() {
    this.getAdvList();
  },
  methods: {
    handlerToChat(item) {
      window.location.href = `https://wecan.keinadd.com/mobile/chat/create_room?type=1&aim_id=${item.uid}`;
    },
    getAdvList() {
      const api = { my_adv, adv_list };
      api[!!this.$route.query.isSelf ? 'my_adv' : 'adv_list']().then(res => {
        if (res.code === 1) {
          res.data.forEach(item => {
            item.create_time = this.dateTrunQuantum(item.create_time);
          });
          this.advList = res.data || [];
        }
      });
    },
    onRevert(item, chat) {
      const { uid, name1 } = chat || {};
      const { id } = item;
      var top = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop;
      this.scrollTop = top || 0;
      this.placeholderEvaluate = '请输入评论内容';
      if(uid !== undefined) {
        this.placeholderEvaluate = '回复' + name1;
      }
      this.showEvaluate = true;
      this.$nextTick(() => {
        this.$refs.inputVal.focus()
      })
      this.currentAdv = {
        adv_id: id,
        parent_id: 0,
        retry_uid: uid || 0
      }
    },
    onBlur() {
      window.scroll(0,this.scrollTop);
      setTimeout(() => {
        if(this.evaluateValue) return;
        this.showEvaluate = false;
      }, 300)
    },
    onBindconfirm() {
      if(!this.evaluateValue) return;
      add_adv_chat({
        text: this.evaluateValue,
        ...this.currentAdv
      }).then(res => {
        this.getAdvList();
        this.evaluateValue = '';
        this.onBlur();
      })
    },
    test(e) {
      console.log(e)
    },
    switchLike({ id, is_point }) {
      adv_point({
        id,
        type: is_point ? 2 : 1
      }).then(res => {
        this.getAdvList();
      });
    }
  }
};
</script>
<style lang="scss">
.btn-active {
  background: #ccc !important;
}
.enter-advertising {
  background-color: #f4f4f4;
  padding-bottom: 100px;
  // height: 100vh;
  box-sizing: border-box;
  // overflow: scroll;
  .wrapper {
      background-color: #f6f6f6;
      height: 60px;
      box-sizing: border-box;
      position: fixed;
      bottom: 0px;
      left: 0;
      width: 100%;
      z-index: 100;
      padding: 10px;
      z-index: 100;
      display: flex;
      input {
          flex: 1;
          box-sizing: border-box;
          border: 1px solid #eeeeee;
          border-radius: 4px;
          background-color: #fff;
          width: 100%;
          height: 100%;
          padding-left: 10px;
      }
      button {
        border: 0 none;
        background-color: #ee8a39;
        color: #fff;
        padding: 0 20px;
        width: 100px;
      }
  }
  .reply-list {
    .reply-item {
      padding-top: 5px;
      padding-bottom: 5px;
      color: #5a5a5a;
    }
  }
  .card {
    padding: 15px;
    background-color: #fff;
    margin-bottom: 10px;
    .header {
      display: flex;
      justify-content: center;
      align-items: center;
      .header-img {
        margin-right: 10px;
        height: 40px;
        width: 40px;
        overflow: hidden;
        border-radius: 4px;
      }
      .header-content {
        flex: 1;
        display: flex;
        flex-direction: column;
        .title {
          color: #4f68b4;
          font-size: 16px;
        }
        .sub-title {
          color: #9c9c9c;
        }
      }
    }
    .content {
      .text {
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 6;
        overflow: hidden;
        font-size: 14px;
        margin-bottom: 10px;
      }
      .img-list {
        padding-top: 10px;
        .img-item {
          background-color: #ccc;
          height: 30vw;
        }
      }
    }
    .content-tooltip {
      display: flex;
      justify-content: center;
      align-items: center;
      color: #c6cdd6;
      height: 40px;
      // border-bottom: 1px solid #eeeeee;
      .browse {
        flex: 1;
      }
      .like {
        margin-right: 15px;
        font-size: 20px;
      }
      .comment {
        font-size: 22px;
        transform: translateY(2px);
      }
    }
    .content-like {
      display: flex;
      align-items: center;
      color: #c6cdd6;
      height: 40px;
      .like {
        font-size: 15px;
      }
      .img-like {
        width: 20px;
        height: 20px;
        border-radius: 2px;
        overflow: hidden;
        margin-left: 9px;
      }
    }
    .content-input {
      border-radius: 2px;
      border: 1px solid #e2e2e2;
      height: 30px;
      background-color: #fcfcfc;
      padding-left: 10px;
      width: 100%;
      box-sizing: border-box;
    }
  }
  .ad-add {
    position: fixed;
    bottom: 100px;
    right: 20px;
    width: 50px;
    height: 50px;
    background-color: #ee8a39;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #fff;
    border-radius: 50%;
    font-size: 30px;
    box-shadow: 0 0px 8px #e8c9b0;
    z-index: 100;
  }
}
</style>
